<template>
	<div>
		<el-dialog v-model="uploadShow.show" title="上传文件" width="50%" :close-on-press-escape="false" :close-on-click-modal="false">

			<el-container>
				<el-aside width="300px">

				</el-aside>
				<el-container>
					<el-header>
						<el-button type="text" link>上传</el-button>
						<el-button type="text" link>删除</el-button>
					</el-header>
					<el-main>Main</el-main>
				</el-container>
			</el-container>
		</el-dialog>

		<el-dialog
			v-model="state.cateDialogVisible"
			title="新增分类"
			width="500"
		>
			<el-form :model="state.cateFrom" label-width="auto" style="max-width: 600px">
				<el-form-item label="名称">
					<el-input v-model="state.cateFrom.name"/>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="cateInrsetBtn">确定</el-button>
				</div>
			</template>
		</el-dialog>
		<el-dialog
			v-model="state.uploadDialogVisible"
			width="500"
		>
			<el-form
				:model="state.fileFrom"
				label-width="auto"
				ref="ruleFormRef"
				:rules="rules"
			>
				<el-form-item label="分类名称" prop="cateId">
					<el-select
						v-model="state.fileFrom.cateId"
						filterable
						placeholder="请选择"
						style="width: 240px"
					>
						<el-option
							v-for="item in state.cateList"
							:key="item.name"
							:label="item.name"
							:value="item.id"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="上传文件" prop="path">
					<el-upload
						class="avatar-uploader"
						:action='state.imgPath + 0'
						:show-file-list="false"
						accept=".jpg,.png"
						:on-change="handleChange"
						:on-success="ImgHandleSuccess"
					>
						<img style="width: 180px;height: 150px" v-if="state.fileFrom.path" :src="state.fileFrom.path"/>
						<el-icon v-else class="avatar-uploader-icon"><Plus/></el-icon>
					</el-upload>
				</el-form-item>

			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="fileInrsetBtn(ruleFormRef)">确定</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import {Plus} from '@element-plus/icons-vue'
import {uploadStore} from "~/stores/upload";


import {UploadProps, FormInstance, FormRules} from "element-plus";
const load = () => {
	state.cateQuery.page += 1
}
const ruleFormRef = ref<FormInstance>()
const uploadShow = uploadStore()
const state = reactive({
	imgPath: import.meta.env.VITE_IMG_PATH,
	cateDialogVisible: false,
	uploadDialogVisible: false,
	cateList: [],
	cateQuery:{
		page:1
	},
	fileList: [],
	cateId: 0,
	cateFrom: {},
	fileFrom: {},
})
onMounted(() => {
	init()
})

interface RuleForm {
	cateId: string
	path: string
}
const rules = reactive<FormRules<RuleForm>>({
	cateId: [
		{
			required: true,
			message: '分类名称不能为空',
			trigger: 'change',
		},
	],
	path: [
		{
			required: true,
			message: '文件不能为空',
			trigger: 'change',
		},
	]
})

function init() {
	http.get("/api/admin/file/cate/list").then(res => {
		state.cateList = res.data
	})
	http.get(`/api/admin/file/file/list?cateId=${state.cateId}`).then(res => {
		state.fileList = res.data
	})
}


/**
 * 获取链接
 * @param path
 */
function path(path: string) {
	navigator.clipboard
		.writeText(import.meta.env.VITE_API_BASE_URL + "/" + path)
		.then(() => {
			ElMessage({
				message: '复制成功',
				type: 'success',
			})
		})
		.catch((err) => {
			console.error('复制失败:', err)
			ElMessage({
				message: '复制失败',
				type: 'error',
			})
		})

}

function cateInrsetBtn() {
	if (state.cateFrom.name === '' || state.cateFrom.name === undefined) {
		toast.error("名称不能为空")
		return
	}

	http.post("/api/admin/file/cate", state.cateFrom).then(() => {
		toast.success("添加成功")
		init()
		state.cateDialogVisible = false
	})
}


const handleChange: UploadProps['onChange'] = (uploadFile) => {
	state.fileFrom.fileType = uploadFile.raw.type
}
//商品文件上传成功时的钩子
const ImgHandleSuccess: UploadProps['onSuccess'] = (response) => {
	state.fileFrom.path = response.data.url;
};

/**
 * 文件上传
 */
const fileInrsetBtn = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			http.post("/api/admin/file/file/insert", state.fileFrom).then(() => {
				toast.success("文件添加成功")
				init()
				state.uploadDialogVisible = false
			})
		} else {
			console.log('error submit!', fields)
		}
	})
}
</script>

<style scoped>

:deep(.el-card__body)  {
	padding: 0 0
}

.cateList {
	cursor: pointer;
	width: 100%;
	height: 30px;
	line-height: 30px;
	border-radius: 10px;
	margin-bottom: 2px;
}

.cateList:hover {
	background-color: #dee2e5;
}

.upload-file {
	width: 100%
}


.avatar-uploader .avatar {
	width: 178px;
	height: 178px;
	display: block;
}

.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}

</style>
